<template>
  <div class="yh">
      <!-- <div class="gl">用户管理</div> -->
      <div class="select">
     
    <select name="" id="">
      <option value="">用户名</option>
      <option value="">证件号</option>
    </select>
  
    <input type="text" name="" id="" placeholder="请输入要查找的借款人名称" v-model="lookname">
    <button class="but1" @click="excellook">查询</button>
    <button class="but2" @click="clear()">重复</button>
    <button class="but4" @click=myexport()>导出</button>
    <button class="but3"> <span>+</span> 新增</button>
      </div>
   <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="借款人名称" prop="name" width="100" />
      <el-table-column label="合同编号" prop="bianhao" width="100" />
      <el-table-column label="贷款本金" prop="benji" width="100" />
      <el-table-column label="年利率(%)" prop="nll" width="80" />
      <el-table-column label="月利率(%)" prop="yll" width="80" />
      <el-table-column label="起息日" prop="qxr" width="100"/>
      <el-table-column label="到期日" prop="dqr" width="180" />
      <el-table-column label="贷款月数" prop="mounth" width="60" />
      <el-table-column label="贷款天数" prop="day" width="60"/>
      <el-table-column label="应收利息总额" prop="priace" width="120" />
      <el-table-column label="本月计息日" prop="jixr" width="180" />
      <el-table-column label="本月结息日" prop="jiexr" width="180" />
      <el-table-column label="本月计息天数" prop="jxday" width="80" />
      <el-table-column label="本月应收利息" prop="ysprice" width="80"/>
    </el-table></div>
  
    <!-- 新增弹窗 -->
    <el-dialog v-model="outerVisible" title="查看用户">
      <template #default>
        <div>
          借款人名称：<span>{{ list.arr.name }}</span><br>
          合同编号：<span>{{ list.arr.bianhao }}</span><br>
          贷款本金：<span>{{ list.arr.benji }}</span><br>
          证件类型：<span>{{ list.arr.nll }}</span><br>
          年利率：<span>{{ list.arr.yll }}</span><br>
          月利率：<span>{{list.arr.qxr }}</span><br>
          起息日：<span>{{ list.arr.dqr}}</span><br>
          到期日：<span>{{list.arr.mounth  }}</span><br>
          贷款月数：<span>{{ list.arr.day }}</span><br>
          贷款天数：<span>{{ list.arr.priace }}</span><br>
          应收利息总额：<span>{{list.arr.jixr }}</span><br>
         
  
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="outerVisible = false">Cancel</el-button>
          
        </div>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  </div>
</template>

<script setup lang="ts">
 import { ref,onMounted,reactive} from 'vue'
  import service from '@/apis/index'
import * as XLSX from 'xlsx'

import fs from 'file-saver'


var currentPage4=ref()
var pageSize4=ref()
var small=ref()
var disabled=ref()
var background=ref()
var handleSizeChange=ref()
var handleCurrentChange=ref()


  //导出
  let myexport = ()=>{
    excelExport(document.querySelector('.el-table__inner-wrapper'),'lalalalala')
  }
  // 自动分析dom元素导出excel
 var excelExport  = (table:any, filename:any)=> {
  // workbook,
  const wb = XLSX.utils.table_to_book(table)

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  }
  const wopts:any = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  }
  const wbout = XLSX.write(wb, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename+'.xlsx')
}
var s2ab:any = (s:any) => {
  if (typeof ArrayBuffer !== 'undefined') {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
}
  //第一次渲染列表
  onMounted(async ()=>{
      var res = await service.list.excel()
      console.log(res.data);
      tableData.value = res.data
     
  })
  const tableData:any = ref([])
  //查找列表
  let outerVisible = ref(false)
  let list:any =reactive({
      arr:[]
  })
  let lookname = ref('')
  let excellook = ()=>{
      outerVisible.value = true
      tableData.value.filter((v:any)=>{
          console.log(v);
          
        if(lookname.value == v.name){
          list.arr=v
          
      }
  
      
      // console.log(JSON.parse(JSON.stringify(list.arr))[0]);
  })
  }
  //清除查询框
  let clear = ()=>{
      lookname.value = ''
  }
  
</script>

<style scoped>
.yh .gl {
     width: 200px;
     height: 40px;
     line-height: 40px;
     border-radius: 40px;
     color: #fff;
     text-align: center;
     background-color:#409eff ;
     margin-bottom: 20px;
   
  }
  .yh .select select{
      width: 100px;
      height: 30px;
      padding-left:10px ;
      border-color:#dcd6d6;
      margin:20px 40px 20px 40px;
      background: #fdfbfb;
  } 
  .yh .select input {
      width: 280px;
      height: 30px;
      padding-left:20px ;
    
      /* margin:20px 40px 20px 40px; */
      background: #fdfbfb;
      border: solid 1px #dcd6d6;
  
  }
  .yh .select .but1 {
      width: 60px;
      height: 30px;
      margin:20px 20px 20px 40px;
      background-color: #409eff;
      color: #fff;
      border: none;
      border-radius: 10px;
  }
  .yh .select .but2 {
      width: 60px;
      height: 30px;
     border-radius: 10px;
      background-color: #fff;
      color: #409eff;
      border: solid 1px #dcd6d6;
  }.yh .select {
      position: relative;
  }
  .yh .select .but3 {
      width: 60px;
      height: 30px;
     border-radius: 10px;
      background-color: #fff;
      color: #409eff;
      border: solid 1px #dcd6d6;
      position: absolute;
      right: 40px;
      
  }
  .yh .select .but4 {
      width: 60px;
      height: 30px;
     border-radius: 10px;
      background-color: #fff;
      color: #409eff;
      border: solid 1px #dcd6d6;
      position: absolute;
      right: 120px;
      
  }
  .yh .select .but4 span img {
      width: 20px;
      height: 20px;
  }
  .yh .select .but3 span {
      font-size: 20px;
      
  }
  /* 分页样式 */
  .el-pagination {
    margin-top: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-33%, 50%);
  }
  .el-dialog {
    height: 600px;
  }
</style>